import { createBrowserRouter, createHashRouter, Route, Switch, Navigate, redirect } from "react-router-dom"
import { useLayoutEffect } from "react"
// createHashRouter 创建hash 路由
// createBrowserRouter 创建history 路由
import React from "react"
import Layout from "../components/Layout"
import Home from "../components/home"
import Demo1 from "../components/demo/demo1"
const Demo2 = React.lazy(() => import("../components/demo/demo2")) // 懒加载
const Demo3 = React.lazy(() => import("../components/demo/demo3"))
const Demo4 = React.lazy(() => import("../components/demo/demo4"))
const Demo5 = React.lazy(() => import("../components/demo/demo5"))
const Demo6 = React.lazy(() => import("../components/demo/demo6"))
const Demo61 = React.lazy(() => import("../components/demo/demo6_1"))
const Demo7 = React.lazy(() => import("../components/demo/demo7"))
const Demo8 = React.lazy(() => import("../components/demo/demo8"))
const Demo9 = React.lazy(() => import("../components/demo/demo9"))
const Demo10 = React.lazy(() => import("../components/demo/demo10"))
const Demo11 = React.lazy(() => import("../components/demo/demo11"))
const Demo12 = React.lazy(() => import("../components/demo/demo12"))

// 方式1：路由守卫高阶组件
const AuthWrapper = ({ children, requiredRoles = [] }) => {
    // const user = JSON.parse(localStorage.getItem("user")) || null
    // if (!user?.token) return <Navigate to="/home" replace />
    // if (requiredRoles.length > 0 && !requiredRoles.some((role) => user.roles?.includes(role))) {
    //     return <Navigate to="/home" replace />
    // }
    return children
}

// 方式2：路由守卫Loader方案 （React Router v6.4+），有点像vue的路由独享守卫，官方推荐。在这里面还能用axios请求，没玩明白
const AuthLoader = async ({ context, params, request }) => {
    // const user = JSON.parse(localStorage.getItem("user")) || null
    // if (!user?.token) throw redirect('/demo5')
    return null
}

export const router = createHashRouter([
    {
        path: "/",
        element: <Layout />,
        children: [
            { index: true, element: <Navigate to="/home" /> },
            { path: "home", element: <Home /> },
            {
                path: "demo1",
                element: (
                    <AuthWrapper requiredRoles={["admin"]}>
                        <Demo1 />
                    </AuthWrapper>
                ), // 假设需要admin权限
                title: "基础组件",
                handle: { scrollKey: "demo1" },
            },
            {
                path: "demo2",
                element: <Demo2 />,
                loader: AuthLoader, // 假设需要admin权限
                title: "数据声明",
            },
            {
                path: "demo3",
                element: <Demo3 />,
                title: "数据监听",
            },
            {
                path: "demo4",
                element: <Demo4 />,
                title: "组件通信",
            },
            {
                path: "demo5",
                element: <Demo5 />,
                title: "Redux使用",
            },
            {
                path: "demo6",
                element: <Demo6 />,
                title: "React路由",
            },
            {
                path: "demo7",
                element: <Demo7 />,
                title: "React插槽",
            },
            {
                path: "demo8",
                element: <Demo8 />,
                title: "React常用Hooks",
            },
            {
                path: "demo9",
                element: <Demo9 />,
                title: "组件封装",
            },
            {
                path: "demo10",
                element: <Demo10 />,
                title: "递归组件",
            },
            {
                path: "demo11",
                element: <Demo11 />,
                title: "axios使用",
            },
            {
                path: "demo12",
                element: <Demo12 />,
                title: "组件渲染",
            },
        ],
    },
    {
        // path: "demo61/:id/:age", // params跳转需要定义参数
        path: "demo61", // query跳转和state跳转，不用定义参数
        element: <Demo61 />,
        title: "测试路由参数",
    },
])

export default router
